<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>

  <body>
    <!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->

    <!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->

    <!--
			火箭2.0版本(火箭的速度先快后慢,当body的scorllTop距离小于8%时,速度变快,并且火箭最终飞出顶部)
		-->
    <div class="web"></div>
    <div class="rocket"></div>
    <!-- <script src="js/index.js" type="text/javascript" charset="utf-8"></script> -->
    <script>
      var rocket = document.querySelector(".rocket");
      rocket.addEventListener("click", function () {
        this.classList.add("rocket-active");
        var bodyScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var gross = window.innerHeight - rocket.style.height / 2;
        var count = 0,
          rocketStep = gross / 60,
          bodyScrollStep = bodyScroll / 60;
        function rocketAnimate() {
          console.log(bodyScroll);
          if (Math.abs(count) >= gross) {
            cancelAnimationFrame(rocketAnimate);
            rocket.classList.remove("rocket-active");
            rocket.style.transform = `translateY(0px)`;
          } else {
            count -= rocketStep;
            rocket.style.transform = `translateY(${count}px)`;
            document.body.scrollTop = document.documentElement.scrollTop = bodyScroll -= bodyScrollStep;
            requestAnimationFrame(rocketAnimate);
          }
        }
        requestAnimationFrame(rocketAnimate);
      });
    </script>
  </body>
</html>
